<template>
  <div>
    <el-table
      border
      :data="tableData">
      <el-table-column
        align="center"
        label="序号"
        prop="serialNumber"
      ></el-table-column>

      <el-table-column
        align="center"
        label="发货单号"
        prop="deliveryCode"
      ></el-table-column>

      <el-table-column
        align="center"
        label="签收时间"
        prop="signTime"
      ></el-table-column>

      <el-table-column
        align="center"
        label="签收人"
        prop="signPerson"
      ></el-table-column>

      <el-table-column
        align="center"
        label="签收附件"
      >
        <template slot-scope="scope">
          <el-button
            @click="view(scope.row)"
            type="text"
          >查看</el-button>
          <el-button
            @click="download(scope.row)"
            type="text"
          >下载</el-button>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="toDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    orderData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  created() {
    this.tableData = this.orderData.tableData;
  },
  data(){
    return {
      tableData: [
      ]
    }
  },
  methods: {
    toDetail(row) {
      this.$emit('toDetail', row)
    },
    view(row){
      this.$alert(`<img src="${row.signFiles[0]}" alt="" />`, '签收附件', {
        customClass: 'w-auto',
        dangerouslyUseHTMLString: true
      });
    },
    download(row){
      this.downloadIamge(row.signFiles[0], '签收附件')
      // const oA = document.createElement('a');
      // document.body.appendChild(oA);
      // oA.target = '_blank';
      // oA.download = '签收附件'; // 下载名称 download 属性仅适用于同源 url
      // oA.href = row.signFiles[0]; // 绑定a标签
      // oA.click(); // 模拟点击实现下载
      // setTimeout(() => {
      //   document.body.removeChild(oA);
      // }, 100);
    },
    downloadIamge (imgsrc, name) { // 下载图片地址和图片名
      var image = new Image()
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        var context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        var url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
        var a = document.createElement('a') // 生成一个a元素
        var event = new MouseEvent('click') // 创建一个单击事件
        a.download = name || 'photo' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = imgsrc
    },
  }
}
</script>

<style>

</style>